<template>
	<view class="content">
		<view class="section-1">
			<view class="section-body">
				<view class="charts">
					<view class="legend">
						<view class="item">
							<view class="icon"></view>
							<text>已完成</text>
						</view>
						<!-- <view class="item item__ing">
							<view class="icon"></view>
							<text>在建</text>
						</view> -->
						<view class="percent">
							<div class="number" v-for="item in list" :key="item.name">
								<text>{{item.done}}</text>
								<!-- <text>/</text>
								<text>{{item.ing}}</text> -->
							</div>
						</view>
					</view>
					<view class="series">
						<view class="item" v-for="item in list" :key="item.name">
							<view class="label">{{item.name}}：{{(Math.round(item.done / item.total) * 100 )|| 0}}%
							</view>
							<view class="bar">
								<view class="done" :style="{width: `${Math.round(item.done / item.total * 100)}%`}">
								</view>
								<view class="ing" :style="{width: `${Math.round(item.ing / item.total * 100)}%`}">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="section-4">
			
			<view class="wrapper wrapper-title">
				<view class="title">土建进度上报<view class="iconfont" @click="go('tj')">+管理土建进度报告</view></view>
				<view class="value l-value">
				<view class="tree">
					<view :class="`tree-item ${expandList.indexOf(item.id) !== -1 ? 'item__expand' : ''}`"
							v-for="(item, index) in data" :key="item.id">
							<view class="parent">
								<view v-if="item.children && item.children.length > 0" class="action" @click="expandChange(item.id)">
									<view class="iconfont icon-xiangyou1"></view>
								</view>
								<view class="name">
									{{item.name}}
								</view>
							</view>
							<view class="child" v-if="expandList.indexOf(item.id) !== -1">
								<view class="child-item" v-for="(item2, idx) in item.children" :key="item2.id">
									<view class="top">
										<view v-if="item2.children && item2.children.length > 0" :class="`action ${expandList.indexOf(`${index}-${idx}`) !== -1 ? 'action__active' : ''}`" @click="expandChange(`${index}-${idx}`, item2.id)">
											<view class="iconfont icon-xiangyou1"></view>
										</view>
										<view class="name">
											{{item2.name}}
										</view>
									</view>
									<view class="grad" v-if="expandList.indexOf(`${index}-${idx}`) !== -1">
										<view class="grad-item" v-for="(item3, idx3) in item2.children" :key="item3.id">
											<view class="grad-top">
												<view class="name">
													{{item3.name}}
												</view>
												<view class="input-value">
													<view class="form-item">
														<view class="input">
															<u--input placeholderClass="input-placeholder" class="input-body"
																v-model="item3.value"></u--input>
															<view class="iconfont">%</view>
														</view>
													</view>
												</view>
												<!-- <view class="desc">
													<text>{{item3.work_position}}</text>
													等级：{{item3.risk_level}}
												</view> -->
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
				</view>
				</view>
			</view>
			
			<view class="wrapper wrapper-title">
				<view class="title">电气进度上报<view class="iconfont" @click="go('dq')">+管理电气进度报告</view></view>
				<view class="value l-value" >
					<view class="tips">
						暂无内容，请通过管理电气进度上报按钮添加
					</view>
				</view>
			</view>
		</view>


		<view class="section-2" :style="{height:fileList.length == 0 ? 'unset' : '250rpx'}">
			<view class="form upload-wrap">
				<view class="form-label" style="width: 140rpx;">
					<view class="label">现场照片：</view>
				</view>
				<view class="form-item"
					:style="{border: fileList.length == 0 ? 'solid 2rpx #1534ce' : 'none', width: '440rpx',}">
					<u-upload :fileList="fileList" :previewFullImage="true" @afterRead="afterRead" @delete="deletePic"
						multiple :maxCount="1"
						:style="{position:'relative',height: fileList.length == 0 ? '44rpx' : 'unset', borderRadius: '20rpx'}">
						<view class="iconfont icon-tupian"></view>
					</u-upload>
				</view>
			</view>
		</view>
		<view class="custom-button" @click="submit">提交进度上报</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import {
		reportAddApi,
	} from '@/api/report.js'
	import { uploadUrl } from '@/baseUrl.js';
	export default {
		data() {
			return {
				fileList: [],
				expandList: [],
				list: [{
						id: 1,
						name: '土建',
						ing: 0,
						done: 0,
						total: 0
					},
					{
						id: 2,
						name: '电气',
						ing: 0,
						done: 0,
						total: 0
					},

				],
				data: [{
						name: '主控通信室',
						id: 1,
					},
					{
						name: '599kv继电器室',
						id: 2,
						children: [{
								name: '地基与基础',
								value: '',
								id: 3,
							},
							{
								name: '主体结构',
								value: '',
								id: 4,
							},
							{
								name: '建筑装饰装修',
								value: '',
								id: 5,
							},
							{
								name: '设备围栏、爬梯及 平台安装',
								value: '',
								id: 6,
							}
						],
					},
					{
						name: '220kv继电器室',
						id: 7,
						children: [{
							name: '220kv继电器室1',
							id: 10,
							children: [{
									name: '地基与基础',
									value: '',
									id: 8
								},
								{
									name: '主体结构',
									value: '',
									id: 9
								},
								{
									name: '建筑装饰装修',
									value: '',
									id: 10
								},
								{
									name: '设备围栏、爬梯及 平台安装',
									value: '',
									id: 11
								}
							],
						}]
					},
				],
				value: ''
			}
		},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject'
			})
		},
		methods: {
			go(type) {
				uni.navigateTo({
					url: '/pages/work/manager/work_manage/progress/info/index?type=' + type
				})
			},
			async expandChange(id,) {
				const idx = this.expandList.indexOf(id);
				if (idx !== -1) {
					this.expandList.splice(idx, 1);
				} else {
					this.expandList.push(id);
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList`].length
				lists.map((item) => {
					this[`fileList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList`][fileListLen]
					this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.data.file_id
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data))
							}, 1000)
						}
					});
				})
			},


		},
		onReady() {

		}
	}
</script>

<style lang="scss" scoped>
	.custom-button {
		margin-top: 60rpx;
		margin-bottom: 85rpx;
		box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(60, 90, 214, 0.42);
	}

	.section-4 {
		.wrapper {


			width: 670rpx;
			margin-left: 40rpx;
			border-radius: 35rpx;
			background-size: cover;
			background-repeat: no-repeat;
			overflow: hidden;
			box-sizing: border-box;
			box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
			padding: 28rpx 40rpx;
			margin-bottom: 25rpx;

			.label {
				width: 135rpx;
				float: left;
				font-size: 26rpx;
				font-weight: bold;
				font-stretch: normal;
				height: 48rpx;
				line-height: 48rpx;
				letter-spacing: 0px;
				color: #46464a;
			}

			.title {
				width: 100%;
				height: 30rpx;
				line-height: 30rpx;
				border-bottom: solid 3rpx #f2f2f0;
				font-size: 26rpx;
				font-weight: bold;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #46464a;
				padding-bottom: 28rpx;

				.iconfont {
					float: right;
					font-size: 26rpx;
					color: #1433cd;
					font-weight: normal;
				}
			}

			.value {
				float: left;
				width: 445rpx;
				.tips{
					width: 100%;
					padding-top: 28rpx;
					text-align: center;
					font-size: 20rpx;color: #3b3c40;
				}
				.tree{
					
					.tree-item{
						width: 100%;
						border-bottom: solid 2rpx #f2f2f0;
							
						.parent {
							width: 100%;
							@include clear();
							.name {					
								width: 400rpx;
								line-height: 30rpx;
								padding: 26rpx 0;
								font-size: 26rpx;
								font-weight: normal;
								font-stretch: normal;
								letter-spacing: 2rpx;
								color: #3b3c40;
								float: left;
							}
							
							.count {
								float: right;
								min-width: 46rpx;
								height: 46rpx;
								margin-top: 18rpx;
								border-radius: 28rpx;
								line-height: 46rpx;
								text-align: center;
								font-size: 26rpx;
								font-weight: bold;
								color: #395cf5;
								background: #ffde00;
								text {
									font-size: 16rpx;
								}
							}
							
							.action {
								float: right;
								width: 32rpx;
								margin-right: 18rpx;
								line-height: 82rpx;
								text-align: center;
								color: #3b3c40;
							
								.iconfont {
									font-size: 32rpx;
									transition: 0.2s ease;
									transform: rotate(90deg);
								}
							
							}
						}
						.child {
							width: 100%;

							.child-item {
								box-sizing: border-box;
								padding-left: 0rpx;
								width: 100%;
								// border-bottom: 2rpx solid #e3e8f5;
								@include clear();
								&:last-child {
									border-bottom: none;
								}
								
								
								.top {
									width: 100%;
									overflow: hidden;
									box-sizing: border-box;
									padding-left: 40rpx;
							
									.name {
										float: left;
										width: calc(100% - 150rpx);
										box-sizing: border-box;
										padding: 26rpx 0;
										color: #3b3c40;
										font-size: 24rpx;
									}
							
									.action {
										width: 32rpx;
										line-height: 82rpx;
										float: right;
										text-align: center;
										color: #7f98ae;
										margin-right: 18rpx;
										.iconfont {
											font-size: 32rpx;
											transition: 0.2s ease;
											transform: rotate(90deg);
										}
									}
								}
							}
						}
						
						.grad{
							width: 100%;
							.grad-item{
								width: 100%;
					
								&:last-child {
									border-bottom: none;
								}
								
								.grad-top {
									width: 100%;
									overflow: hidden;
									box-sizing: border-box;
									padding-left: 40rpx;
									.name {
										float: left;
										width: 260rpx;
										line-height: 30rpx;
										color: #3b3c40;
										font-size: 22rpx;
										padding-left: 40rpx;
										box-sizing: border-box;
										margin-right: 16rpx;
									}
									.input-value{
									
										display: inline-block;
										float: left;
										width: 146rpx;
										height: 48rpx;
										border-radius: 20rpx;
										border: solid 2rpx #1534ce;
										margin: 0 auto;
										margin-bottom: 17rpx;
										@include clear();
										position: relative;
										.iconfont {
											position: absolute;
											right: 25rpx;
											top: 0rpx;
											font-size: 30rpx;
											color: #dad9df;
										}
										.label {
											float: left;
											width: 134rpx;
											height: 48rpx;
											text-align: center;
											line-height: 44rpx;
											font-size: 26rpx;
											font-weight: normal;
											font-stretch: normal;
											letter-spacing: 0rpx;
											color: #1534ce;
										}
									
										.shape {
											width: 3rpx;
											height: 32rpx;
											background-color: #7f98ae;
											float: left;
											margin-top: 8rpx;
										}
									
										.input {
											float: left;
											width: 100%;
											padding-top: 0;
									
											.input-body {
												box-sizing: border-box;
												width: 100%;
												height: 44rpx;
												padding: 0 !important;
												border: none;
												padding-left: 30rpx !important;
												padding-right: 30rpx !important;
												font-size: 26rpx;
												font-weight: normal;
												font-stretch: normal;
												letter-spacing: 0rpx;
												color: rgba(0, 0, 0, 0.7);
											}
									
											.input-placeholder {
												font-size: 26rpx;
												font-weight: normal;
												font-stretch: normal;
												letter-spacing: 0rpx;
												color: rgba(0, 0, 0, 0.5);
											}
										}
										
									}
									// .desc{
									// 	float: left;
									// 	width: calc(100% - 40rpx);
									// 	font-size: 16rpx;
									// 	color: #9b9b9b;
									// 	box-sizing: border-box;
									// 	padding-left: 50rpx;
									// 	padding-bottom: 26rpx;
									// 	text{
									// 		min-width: 300rpx;
									// 		margin-right: 30rpx;
									// 		display: inline-block;
									// 	}
									// }
								}
							}
						}
						.action__active{
							.iconfont{
								transform: rotate(-90deg)!important;
							}
						}
						
					}
					.item__expand {
							.parent {
								.action {
									.iconfont {
										transform: rotate(-90deg);
									}
								}
							}
					
							.child {
								// box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.05) inset;
							}
						}
				}
				.audio {
					width: 50rpx;
					height: 50rpx;
					background-color: #ffffff;
					border-radius: 50%;
					box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
					overflow: hidden;

					.audio-center {
						margin-top: 13rpx;
						margin-left: 13rpx;
						border-radius: 50%;
						width: 24rpx;
						height: 24rpx;
						background-color: #ed451b;
					}
				}

				.upload-wrap {
					width: 100%;
					min-height: 48rpx;
					border-radius: 20rpx;
					border: solid 2rpx #0535d6;
					position: relative;

					.iconfont {
						position: absolute;
						right: 25rpx;
						line-height: 44rpx;
						color: #1534ce;
						font-size: 28rpx;
					}
				}

				.date {
					width: 100%;
					height: 48rpx;
					border-radius: 20rpx;
					border: solid 2rpx #0535d6;
					line-height: 48rpx;
					position: relative;
					font-size: 26rpx;
					color: rgba(0, 0, 0, 0.7);
					box-sizing: border-box;
					padding-left: 20rpx;
					text-align: center;
					color: #0535d6;

					.iconfont {
						position: absolute;
						right: 25rpx;
						top: 2rpx;
						font-size: 30rpx;
						color: #dad9df;
					}
				}

				.picker {
					width: 100%;
					height: 48rpx;
					border-radius: 20rpx;
					border: solid 2rpx #0535d6;
					line-height: 48rpx;

					text {
						font-size: 26rpx;
						letter-spacing: 0rpx;
						color: rgba(#46464a, 0.5);
						margin-left: 28rpx;
					}

					.iconfont {
						float: right;
						font-size: 32rpx;
					}
				}

				.input {
					padding-top: 18rpx;

					.input-body {
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0 !important;
						border: none;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.7);
					}

					.input-placeholder {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}

				.textarea {
					width: 100%;
					height: 300rpx;
					line-height: 30rpx;

					.textarea-body {
						box-sizing: border-box;
						width: 100%;
						height: 300rpx;
						border: none;
						padding: 18rpx 0rpx !important;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;

						/deep/ .u-textarea__field {
							height: auto !important;
							font-size: 25rpx;
						}
					}

					/deep/ .u-textarea--disabled {
						background-color: #fff;
					}

					.textarea-placeholder {
						font-size: 25rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 50rpx;
						letter-spacing: 3rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}

			.l-value {
				width: 100%;
			}


		}

	}

	.section-2 {
		.upload-wrap {
			align-items: unset;
			height: unset;
			line-height: unset;
		}

		/deep/ .u-upload__wrap {

			background-color: transparent;
		}

		.icon-tupian {
			position: absolute;
			right: 25rpx;
			line-height: 44rpx;
			color: #1534ce;
			font-size: 28rpx;
		}

		box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
		width: 670rpx;
		margin-left: 40rpx;
		height: 104rpx;
		background-color: #ffffff;
		border-radius: 35px;
		margin-bottom: 30rpx;

		.form {
			width: 100%;
			text-align: center;
			padding-top: 28rpx;
			padding-left: 40rpx;
			box-sizing: border-box;
			@include clear();

			.form-label {
				display: inline-block;
				font-size: 26rpx;
				font-weight: bold;
				font-stretch: normal;
				line-height: 48rpx;
				letter-spacing: 0rpx;
				color: #46464a;
				float: left;
			}

			.form-item {
				display: inline-block;
				float: left;
				width: 464rpx;
				height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #1534ce;
				margin: 0 auto;
				margin-bottom: 34rpx;
				@include clear();

				.label {
					float: left;
					width: 134rpx;
					height: 48rpx;
					text-align: center;
					line-height: 44rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #1534ce;
				}

				.shape {
					width: 3rpx;
					height: 32rpx;
					background-color: #7f98ae;
					float: left;
					margin-top: 8rpx;
				}

				.input {
					float: left;
					width: 100%;

					.input-body {
						box-sizing: border-box;
						width: 100%;
						height: 44rpx;
						padding: 0 !important;
						border: none;
						padding-left: 30rpx !important;
						padding-right: 30rpx !important;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.7);
					}

					.input-placeholder {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.5);
					}
				}
			}
		}
	}

	.section-1 {
		width: 100%;
		background-color: #2e5efe;
		margin-bottom: 50rpx;

		.section-body {
			width: 100%;
			background-repeat: no-repeat;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			overflow: hidden;
			box-sizing: border-box;
			background-color: #fff;
			padding: 0 40rpx;

			.charts {
				width: 100%;
				padding-top: 30rpx;

				.legend {
					width: 165rpx;
					height: 40rpx;
					float: right;
					text-align: right;

					.item {
						height: 40rpx;
						display: inline-block;

						.icon {
							display: inline-block;
							border-radius: 50%;
							width: 15rpx;
							height: 15rpx;
							background-color: #2d5dfe;
							margin-right: 7rpx;
						}

						text {
							font-size: 16rpx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 35rpx;
							letter-spacing: 0rpx;
							color: #d8d8d5;
							margin-right: 20rpx;
						}

					}

					.item__ing {
						.icon {
							background-color: #00cdb4;
						}

						text {
							margin-right: 0;
						}
					}

					.percent {
						width: 100%;
						box-sizing: border-box;
						padding-left: 30rpx;

						.number {
							width: 100%;
							font-size: 16rpx;
							height: 20rpx;
							line-height: 20rpx;
							color: #3b3c40;
							display: flex;
							justify-content: space-between;


						}
					}
				}

				.series {
					width: 505rpx;
					float: left;
					padding-top: 40rpx;

					.item {
						width: 100%;
						height: 20rpx;
						line-height: 20rpx;
						@include clear();

						.label {
							float: left;
							width: 130rpx;
							line-height: 20rpx;
							font-size: 16rpx;
							font-weight: normal;
							font-stretch: normal;
							letter-spacing: 0rpx;
							color: #3b3c40;
						}

						.bar {
							float: left;
							width: 360rpx;
							height: 14rpx;
							margin-top: 3rpx;
							background-color: #d8d8d5;
							border-radius: 7rpx;
							position: relative;
							overflow: hidden;

							.done {
								height: 100%;
								float: left;
								background-color: #2d5dfe;
							}

							.ing {
								height: 100%;
								float: left;
								background-color: #00cdb4;
							}
						}
					}
				}
			}
		}
	}
</style>
